<template>
  <el-dialog
    title="内容营销数据"
    v-model="visible"
    top="10vh"
    width="80%"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-descriptions
      title=""
      :column="4"
      direction="vertical"
    >
      <el-descriptions-item label="访问量">{{ userForm.readNum }}</el-descriptions-item>
      <el-descriptions-item label="咨询量">{{ userForm.consultNum }}</el-descriptions-item>
      <el-descriptions-item label="收藏量">{{ userForm.collectNum }}</el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { AiEditor } from "aieditor";
import "aieditor/dist/style.css"
import { Plus } from '@element-plus/icons-vue'

import { ref, watch, onMounted, onUnmounted, type PropType } from 'vue'
import { UPDATE_MODEL_EVENT } from 'cm/contants'
import {
  getTagsAllList,
  type TagsApiResult
} from '@/api/tags'

import { type ColumnApiResult } from '@/api/column'
import { getContentInfo, type ContentApiResult, type ICreateOrUpdateContent } from '@/api/content'
import { ElMessage } from 'element-plus'
import { getToken } from '@/utils/cache'
import { fileUpload, type OssApiResult } from '@/api/oss'
import appConfig from '@/config/index'

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true,
    default: false
  },
  currId: {
    type: String,
    required: true,
    default: ''
  }
})

const defaultForm = {
  id: '',
  title: '',
  intro: '',
  columnId: '0',
  tags: [],
  recom: '',
  publishDate: '',
  price: 0.00,
  originalPrice: 0.00,
  img: '',
  keyword: '',
  description: '',
  content: '',
  orderNum: 0,
  collectNum: 0,
  consultNum: 0,
  readNum: 0
}
// 表单逻辑
const userForm = ref<ICreateOrUpdateContent>({ ...defaultForm })

const emit = defineEmits([UPDATE_MODEL_EVENT, 'change'])
const visible = ref<boolean>(false)

const loading = ref<boolean>(false)
// 查询栏目详情
const getContentInfoApi = async (currId: string) => {
  loading.value = true
  const res = await getContentInfo(currId)
  loading.value = false
  if (res?.code === 200) {
    userForm.value = res.data as ICreateOrUpdateContent;
  }
}

watch(() => props.modelValue,
  async () => {
    visible.value = props.modelValue;
    await getContentInfoApi(props.currId)
  }
)

const handleClose = () => {
  userForm.value = {
    id: '',
    title: '',
    intro: '',
    columnId: '0',
    tags: [],
    recom: '',
    publishDate: '',
    price: 0.00,
    originalPrice: 0.00,
    img: '',
    keyword: '',
    description: '',
    content: '',
    orderNum: 0,
    collectNum: 0,
    consultNum: 0,
    readNum: 0
  }
  emit(UPDATE_MODEL_EVENT, false)
}

</script>

<style scoped>
.img-uploader .img {
  width: 140px;
  height: 140px;
  display: block;
}
</style>

<style>
.img-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.img-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.img-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>